<template>
  <div class="login">
    <h3>星源协同开发系统</h3>
    <el-form label-width="80px" :model="loginData">
      <el-form-item label="账号">
        <el-input v-model="loginData.name" placeholder="请输入账户" />
      </el-form-item>
      <el-form-item label="密码">
        <el-input v-model="loginData.password" type="password" placeholder="请输入密码" show-password />
      </el-form-item>
      <el-form-item>
        <el-button @click="subFun" class="sub-btn" type="primary">登陆</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { reactive } from 'vue'
import { ElMessage } from 'element-plus'
import { login } from '@/http/api'
import router from '../router/index.js'

export default {
  name: 'LoginView',
  setup() {
    let loginData = reactive({
      name: '',
      password: ''
    })
    let subFun = () => {
      if (!loginData.name || !loginData.password) {
        ElMessage.error('账户或密码不能为空！');
        return
      }

      login(loginData).then(res => {
        console.log(res)
        router.push('/Home')
      })
    }
    return {
      loginData,
      subFun
    }
  }
}
</script>
<style scoped>
.login {
  width: 400px;
  margin: 150px auto;
  border: 1px solid #efefef;
  border-radius: 10px;
  padding: 20px;
}

h3 {
  text-align: center;
}

.sub-btn {
  width: 100%;
}
</style>